<template>
	<view>
		<p-navbar title=""></p-navbar>
		<view class="title">
			<view>新增地址</view>
		</view>
		<view class="form">
			<view class="item" v-for="(item, index) in node" :key="item.key">
				<view class="label" :class="[`icon-${item.icon}`]">{{ item.label }}</view>
				<view class="content">
					<input class="input" :placeholder="item.msg" :maxlength="item.len" v-model="form[item.key]" @keyup.enter="fnForget" />
				</view>
			</view>
		</view>
		<view class="submit">
			<u-button type="primary" ripple :loading="loading" shape="circle" @tap="fnForget" :style="{'background':disabled?'#F3C31B':''}">新增地址</u-button>
		</view>
	</view>
</template>

<script>
	import {
		getCode
	} from '@/utils/mixins'
	export default {
		data() {
			return {
				// disabled:false,
				node: [{
						key: 'withdrawAddress',
						label: '提现地址',
						msg: '请输入或者长按粘贴钱包地址',
						icon: 'password',
						type: 'password',
						len: 50
					},
					{
						key: 'name',
						label: '地址名称',
						msg: '请输入地址名称',
						icon: 'password',
						type: 'password',
						len: 50
					}
				],
				form: {}, // 表单内容
				loading: false // 注册加载中
			}
		},
		computed: {
			// 注册按钮是否禁止点击
			disabled() {
				for (let i = 0; i < this.mustNode.length; i++) {
					const ele = this.mustNode[i]
					if (!this.form[ele.key]) return false
				}
				return true;
			},
			// 必填的节点信息
			mustNode() {
				// return this.node.slice(0, this.node.length - 1);
				return this.node
			}
		},
		methods: {
			fnForget() {
				if (this.loading || !this.disabled) return;
				this.loading = true;
				this.request.post('coinWithdrawAddress/insert', {
						...this.form
					})
					.then(res => {
						if (res.data.code === 1) {
							this.util.toast('地址添加成功', 'success')
							setTimeout(() => {
								this.util.router.back()
							}, 1000)
						}
						this.loading = false
					})
					.catch(err => {
						this.loading = false
					})
			},
		}
	}
</script>

<style lang="scss">
	.title {
		padding: 100rpx 60rpx 10rpx 60rpx;
		view:nth-child(1) {
			font-size: 38rpx;
			font-weight: bold;
			margin-bottom: 20rpx;
		}
	}

	.form {
		padding: 0 40rpx;
	}

	.item {
		border-bottom: 2rpx solid $border;
		padding-top: 40rpx;

		.content {
			@include flex;

		}

		.label {
			height: 40rpx;
			font-size: 28rpx;
			padding-left: 20rpx;
			background-size: 36rpx 40rpx;
			background-position: 0 center;
			background-repeat: no-repeat;
			line-height: 40rpx;
			$icon: phone password code invite;

			@each $c in $icon {
				&.icon-#{$c} {
					// background-image: url("~@/static/login-icon-#{$c}.png");
				}
			}
		}

		.input {
			font-size: 25rpx;
			height: 100rpx;
			padding: 0 30rpx 0 20rpx;
			flex: 1;
			background: none;
			border: none;
			outline: none;
		}

		.password {
			width: 32rpx;
			height: 16rpx;
			background-image: url("~@/static/login-psw-hide.png");
			@include background;
			margin-right: 50rpx;
			@include click;

			&.show {
				height: 24rpx;
				background-image: url("~@/static/login-psw-show.png");
			}
		}

		.code {
			font-size: 24rpx;
			color: $color-primary;
			margin-right: 50rpx;
			@include click;

			&.disabled {
				color: #CACACA;
			}
		}
	}

	.submit {
		margin: 90rpx 64rpx;

		/deep/ .u-btn {
			background-color: #D7D7D7;
			// box-shadow: 0 17rpx 40rpx rgba(38, 109, 245, .3);
			transition: .3s;
			height: 90rpx;
			border-radius: 20rpx;

			// border-radius: 10rpx;
			&[disabled] {

				box-shadow: none !important;
				background-color: $light-color !important;
			}

		}

		/deep/ .u-round-circle::after {
			border-radius: 20rpx;
		}
	}

	.agreement {
		margin-top: 50rpx;
		padding-bottom: 60rpx;
		text-align: center;
		font-size: 24rpx;
		color: #D7D7D7;

		text {
			color: #266DF5;
		}
	}
</style>
